<template>
    <div class="show-order"  >
        <div class="header" v-for="item in groupInfo">
            <router-link class="header-btnLeft" :to="{path:'/my-program-show/'+id}" ><img src="../assets/back-btn.png"></router-link>
            <h1 class="header-title">行程信息</h1>
            <div class="header-btnRight"></div>
        </div>
        <div class="h30"></div>
        <div class="product" v-for="item in groupInfo">
            <img class="product-img" :src="item.trip_banner">
            <div class="product-info">
                <div class="product-info-title">{{item.tripname}}</div>
                <div class="product-info-title2">天数：{{item.days}}</div>
                <div class="product-info-desc" v-if="id">ID：{{id}}</div>
            </div>
        </div>
        <!--出团信息以及设计到的id-->
       <!-- <div class="grouptourism">
           <div>拼游订单ID:<span>{{carPoolOrder}}</span></div>
        </div>-->
        <div class="h30"></div>
        <div class="list">
            <form bindsubmit="formSubmit">
                <div class="list-title">联系人信息</div>
                <div  class="list-item">
                    <div class="list-item-title">手机号 <span class="warning">*</span></div>
                    <div  class="list-item-input">
                        <TelCode :phoneCode="phoneCode" v-on:phoneCodeFn="phoneCodeFnFn" ></TelCode>
                        <input  name="phone" class='list-item-input-phone listinputwidth'   v-model.trim="phone"  placeholder="请输入出行人手机号"  maxlength="30"/></div>
                </div>
                <div class="list-item">
                    <div class="list-item-title">姓名 <!--<span class="warning">*</span>--></div>
                    <div class="list-item-input"><input class="listinputwidth" name="name1"   v-model="name1" placeholder="请输入您的姓名"/></div>
                </div>
                <!--<div class="list-item">
                    <div class="list-item-title">名（拼音）<span class="warning">*</span></div>
                    <div class="list-item-input"><input name="name2" @input="association($event.target.value,'ming')"   v-model="name2"  placeholder="请输入您的名"/></div>
                </div>-->
                <div class="list-item">
                    <div class="list-item-title">微信号</div>
                    <div class="list-item-input"><input class="listinputwidth" name="wechat"  v-model="wechat"  placeholder="方便与您确认行程"/></div>
                </div>
                <div class="list-item">
                    <div class="list-item-title">邮箱
                        <!--<span class="warning">*</span>-->
                    </div>
                    <div class="list-item-input"><input class="listinputwidth" name="email"   v-model.trim="email" placeholder="方便接收行程确认信息"/></div>
                </div>
                <div class="list-item" v-if="bookingQuestions.length>0" v-for="(item,index) in bookingQuestions" :key="item.stringQuestionId">
                    <div class="list-item-title">{{item.title}}
                        <span class="warning">*</span>
                    </div>
                    <div class="list-item-input"><input class="listinputwidth" style="width:100%" :name="item.stringQuestionId"  v-model="bookingQuestions[index].answer" :placeholder="item.subTitle"/></div>
                </div>
                <div class="list-item">
                    <div class="list-item-title">成人</div>
                    <div class="list-item-input"><input class="listinputwidth" type="number"  name="adultPassengers"   v-model="adultPassengers" placeholder="请输入成人数" @input="personPric(personid)"/></div>
                </div>
                <div class="list-item">
                    <div class="list-item-title">儿童</div>
                    <div class="list-item-input"><input class="listinputwidth" type="number" name="childPassengers"   v-model="childPassengers" placeholder="请输入儿童数" @input="personPric(personid)"/></div>
                </div>
                <div class="list-item">
                    <div class="list-item-title">年龄</div>
                    <div class="list-item-input"><input class="listinputwidth" type="number" name="age"   v-model="age" placeholder="请输入年龄"/></div>
                </div>
                <div class="list-item" v-if="!carPoolOrder">
                    <div class="list-item-title" v-if="!carPoolOrder">出行时间</div>
                    <div class="list-item-input"><input class="listinputwidth" ref="listinput1"  name="selectedValue" @click="selectData" v-model="selectedValue" placeholder="请输入出行时间"/></div>
                </div>
                <!--<div class="list-item">
                    <div class="list-item-title">备注</div>
                    <div class="list-item-input"><input class="listinputwidth" name="content" v-model="content" placeholder="请输入备注信息"/></div>

                </div>-->
                <div class="pickerDemo">
                    <!--<div class="showTime">-->
                        <!--<p class="timeDes">当前时间是：{{this.selectedValue}}</p>-->
                        <!--<div class="selectTime" @click="selectData">选择时间</div>-->
                    <!--</div>-->
                    <!-- @touchmove.prevent 阻止默认事件，此方法可以在选择时间时阻止页面也跟着滚动。 -->
                    <div class="pickerPop" @touchmove.prevent>
                        <!-- 年月日时分选择 -->
                        <mt-datetime-picker
                                lockScroll="true"
                                ref="datePicker"
                                v-model="dateVal"
                                class="myPicker"
                                type="date"
                                year-format="{value}"
                                month-format="{value}"
                                date-format="{value}"
                                @confirm="dateConfirm()">
                        </mt-datetime-picker>
                    </div> <!-- hour-format="{value}"
                                minute-format="{value}"
                                  second-format="{value}"
                                -->
                </div>

            </form>
        </div>

        <div class="h30"></div>

        <div class="h120"></div>


        <div class="buyBar">
            <div class="buyBar-item">
                <div class="buyBar-item-title">总价</div>
                <div class="buyBar-item-price">¥ {{totalprices}}</div>
            </div>
            <div class="buyBar-buy" @click='Getorder'>立即预订</div>
        </div>
        <mt-actionsheet
                :actions="payActions"
                v-model="payState">
        </mt-actionsheet>
    </div>
</template>

<script type="text/ecmascript-6">
    import { Card, createToken,cardElement, } from 'vue-stripe-elements-plus';
    import { Toast,MessageBox, Indicator,Actionsheet,DatetimePicker} from 'mint-ui';
    import {formatDate} from '@/assets/js/formatdate.js'  //格式化日期时间
    import config from '../store/config';
    import wxShare from "../store/wxShare"
    import TelCode from '../components/TelCode';
    import storage from "../store/localstorage";

    //add by sunyifei for debug
    // import Vue from 'vue';
    // import VueToasted from 'vue-toasted';
    //
    // Vue.use(VueToasted, {
    //   theme: "toasted-primary",
    //   position: 'top-left'
    // });


    export default {
        name: "Show-order",
        components:{
            TelCode,
            Card
        },
        data() {
        return {
            person:[],
            url:config.url,
            name1: '',
            name2: '',
            wechat: '',
            phone:'',
            phoneCode:'+86',
            email:'',
            content: '',
            adultPassengers:1,
            childPassengers:0,
            age:1,
            serve_address:'',
            totalPrice: 0, //总价
            totalPricePay: 0, //实际支付总价
            ticketinfo: '', //优惠信息
            order_id: '',
            goods_id: '',
            product: '',
            ticket: false,
            ticketArr: [],  //优惠券数组
            ticket_coupon_id: '',//被选择中优惠券
            coupon_type:'', //优惠券类型
            ticket_top: 200, //弹窗位置,
            clientHeight:0,
            typesource:'',//判断三方订单
            bookingQuestions:[],//预定需回答的问题
            payState:false,
            payActions:[],
            orderType:"",//当前订单类型
            order_no:"",//当前订单号
            stripePayInfo:{},//stripe订单价格集合
            dateVal: '', // 默认是当前日期
            selectedValue: '', //表单时间与日期
            line_id:'',
            product_id:'',
            carPoolOrder:'',
            groupInfo:[],  //info信息
            shareImg:'https://kwibon-public-images.oss-cn-beijing.aliyuncs.com/custom/68fa01cd5691eb3282147a796baf1d98jpg', //分享用的图
            personid:'', // 选择几人成团ID
            personPrics:'',//没有carPoolOrder 拼游ID 手动选择几人出的价格
            totalprices:0 , //价格   人数*单价
            hotelnum:1, //酒店房间数
            hoteldays:'', //酒店天数
            hotelunitprice:0, //酒店单价
            unitPrice:0,  //成团后台返回单价
            groupOrder:[],//团信息
            person_id:'' //拼游id
        }
    },
    created(){

    },
    methods: {
        /*表单日期与时间*/
        selectData () { // 打开时间选择器
            // 如果已经选过日期，则再次打开时间选择器时，日期回显（不需要回显的话可以去掉 这个判断）
            if (this.selectedValue) {
                this.dateVal = this.selectedValue
            } else {
                this.dateVal = new Date()
            }
            this.$refs['datePicker'].open()
            this.$refs.listinput1.blur()
        },
        dateConfirm () { // 时间选择器确定按钮，并把时间转换成我们需要的时间格式
            this.selectedValue = formatDate(this.dateVal)
        },
        /*表单日期与时间*/
        verification(v){
            var reg=/[\u4E00-\u9FA5]/
            if(reg.test(v) && v.length<2){
                Toast({message:'成员姓、名请输入拼音,长度大于2', duration: 1000});
            }
        },
        phoneCodePeopleFn(val){
            this.person[0].people[0].phoneCode=val;
        },
        phoneCodeFnFn(val){
            this.phoneCode=val;
            if(this.typesource=='viator'){
                this.person[0].people[0].phoneCode=val;
            }
        },
        buyPost: function () {
            var _that = this;
        /*    var regChinese=/[\u4E00-\u9FA5]/
            if(_that.name1.length<2 || regChinese.test(_that.name1)){
                Toast({message:'联系人姓请输入，长度大于2', duration: 1000});
                return false;
            }*/
          /*  if(_that.name2.length<2 || regChinese.test(_that.name2)){
                Toast({message:'联系人名请输入，长度大于2', duration: 1000});
                return false;
            }*/

            var phoneCode = _that.phoneCode;
            var regPhoneCode = new RegExp("^[0\+][0-9]{1,5}$");
            if (!phoneCode) {
                Toast({message:'请输入电话号码国家代码', duration: 1000});
                return false;
            } else if (!regPhoneCode.test(phoneCode)){
                Toast({message:'请设置电话区号', duration: 1000});
                return false;
            }
            var phone = _that.phone;
            //var regMobile = new RegExp("^(1)[0-9]{10}$");
            if (!phone || phone.length < 3) {
                Toast({message:'请输入手机号码', duration: 1000});
                return false;
            }
            for(let b = 0; b < _that.bookingQuestions.length; b++){
                if (_that.bookingQuestions[b].answer.length < 1) {
                    Toast({message:'请输入'+_that.bookingQuestions[b].title, duration: 1000});
                    return;
                }
            }

            // else if (!regMobile.test(phone)) {
            //   _that.showToast('手机号码格式不正确');
            //   return false;
            // }

            var email = _that.email;
            var regEmail = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
           /* if (!email) {
                Toast({message:'请输入邮箱', duration: 1000});
                return false ;
            } else if (!regEmail.test(email)) {
                Toast({message:'请输入正确的邮箱', duration: 1000});
                return false;
            }*/

            var params = {
                           //拼游时间
                carPoolOrder:_that.carPoolOrder, //拼游订单id
                consumer_name: _that.name1, //姓名
                consumer_wechat: _that.wechat, //微信
                consumer_phone: _that.phoneCode + _that.phone, //客户电话
                consumer_email: _that.email, //邮箱
//                serveAddress: _that.serve_address, //酒店地址
                note: _that.content, //备注
                adultPassengers:_that.adultPassengers,  //成人数
                childPassengers:_that.childPassengers, //儿童数
                age:_that.age,  //年龄
                amount:_that.totalprices,   //总价
                person_id:_that.personid,   //选择几人出行id
                line_id:_that.line_id,    //ID
                startDate:_that.selectedValue,  //出团日期
                hotel_num:_that.hotelnum,  //酒店房间数
            }
            if(_that.bookingQuestions.length>0){
                params.bookingQuestionAnswers = [];
                _that.bookingQuestions.forEach((item,i)=>{
                    params.bookingQuestionAnswers.push({
                        questionId:item.questionId,
                        answer:item.answer,
                    })
                })
                params.bookingQuestionAnswers = JSON.stringify(params.bookingQuestionAnswers)
            }

            _that.axios.postAll('/grouptours/addcustomer', params,true) //拼游信息表单提交
                    .then(res => {
                storage.set('contact',{
                    contact_xing: _that.name1,
                    contact_ming: _that.name2,
                    wechat_number: _that.wechat,
                    phone: _that.phone,
                    phoneCode: _that.phoneCode,
                    e_mail: _that.email,
                })
                if(res.data.code == 200){
                    // 判断是否需要调用支付接口
                 /*   if(_that.totalPricePay==0 || res.data.fold_money == 0){
                        _that.$router.push({path:'/pay-success',query:{goods_id:_that.goods_id,order_id: _that.order_id}})
                    }else{
                        // _that.payState = true;
                        // _that.stripePayInfo.moneyArr = res.data.moneyArr;

                        // 跳转到确认订单支付页面
                        _that.$router.replace('/my-order-detail-unpaid?order_no='+_that.order_no);
                    }*/
                    //跳转到确认订单页    返回订单orderNo
                    _that.order_no=res.data.data.personalOrder.orderNo
                    _that.$router.replace('/GroupShowOrder-detail-unpaid?order_no='+_that.order_no);

                }else if(res.data.code == 305){
                    //重复订单跳转到我的订单
                    _that.$router.replace('/my-order-detail-unpaid?order_no='+_that.order_no);
                }else{
                    //其他错误提示
                    Toast({message: res.data.msg, duration: 1500});
                }

            })
        .catch(err => console.log(err));
        },
        // 开始支付
        beginPay(){
            let fromApp = 0;
            if(this.$store.state.appNestState) {
                fromApp = 1;
            }
            // Vue.toasted.show('beginPay at20190125 : fromApp =' + fromApp);

            let postData = {
                order_id: this.order_id,
                order_no: this.order_no,
                orderType: this.orderType
            };

            let appid = window.localStorage.appid;
            if(fromApp && appid && appid.length > 0) {
                postData.appid = appid;
            }
            // Vue.toasted.show('/wxpay : appid =' + appid);

            this.axios.post('/wxpay', postData).then(res => {
                // Vue.toasted.show('res : fromApp =' + fromApp);
                // Vue.toasted.show('/wxpay : res.data =' + JSON.stringify(res.data));

                // Vue.toasted.show('res.data.appId =' + res.data.appId);
                // Vue.toasted.show('res.data.partnerid =' + res.data.partnerid);
                // Vue.toasted.show('res.data.prepayid =' + res.data.prepayid);


                if(!fromApp) {
                    var params = {
                        appId: res.data.appId,
                        timeStamp: res.data.timeStamp,
                        nonceStr: res.data.nonceStr,
                        package: res.data.package,
                        paySign: res.data.paySign
                    };
                    this.wxPay(params);

                } else {
                    this.appWXPay(res.data);
                }
            }).catch(err => console.log(err));
        },
        // 微信支付
        wxPay(params){
            var _that=this
            function onBridgeReady(){
                console.log('onBridgeReady');
                WeixinJSBridge.invoke(
                        'getBrandWCPayRequest', {
                            "appId":params.appId,     //公众号名称，由商户传入
                            "timeStamp":params.timeStamp,  //时间戳，自1970年以来的秒数
                            "nonceStr":params.nonceStr, //随机串
                            "package":params.package,
                            "signType":"MD5",         //微信签名方式
                            "paySign":params.paySign //微信签名
                        },
                        function(res){
                            if(res.err_msg == "get_brand_wcpay_request:ok" ){
                                _that.$router.push({path:'/pay-success',query:{goods_id:_that.goods_id,order_id: _that.order_id}});
                            }
                        });
            }
            if (typeof WeixinJSBridge == "undefined"){
                if( document.addEventListener ){
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                }else if (document.attachEvent){
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            }else{
                onBridgeReady();
            }
        },

        /*getData(){
            let _that = this;
            let params = {
                order_id: _that.order_id,
                orderType: _that.orderType,
                order_no: _that.order_no
            }
            _that.axios.post('waporderdetermine', params)
                    .then(res => {
                var reg=/^(http|https):\/\//;
                if(!reg.test(res.data.goods_image)){
                    res.data.goods_image=_that.url+ res.data.goods_image
                }
                _that.product=res.data;
                _that.totalPrice=res.data.original_money;
                _that.totalPricePay=res.data.original_money;
                //_that.goods_id=res.data.goods_id;
                _that.typesource=res.data.typesource
                _that.getTicket();
                _that.share(); //分享
//                _that.getGoodsData(); //获取商品信息
                //console.log(res.data.person)
                // 处理购买成员信息
                if(_that.typesource=='viator'){
                    var person=[]
                    res.data.person.forEach((item,index)=>{
                        item.people=[];
                        for(var i=0;i<parseInt(item.person_num);i++){
                            if(index==0 && i==0 ){
                                var contact=storage.get('contact');
                                if(contact){
                                    item.people.push({
                                        xing:contact.contact_xing,
                                        ming:contact.contact_ming,
                                        phoneCode:contact.phoneCode,
                                        phone:contact.phone,
                                        email:contact.e_mail
                                    })
                                }else{
                                    item.people.push({
                                        xing:'',
                                        ming:'',
                                        phoneCode:'+86',
                                        phone:'',
                                        email:''
                                    })
                                }
                            }else{
                                item.people.push({xing:'',ming:''})
                            }
                        }
                        person.push(item);
                    })
                    this.person=person;
                    //console.log(_that.person)
                }
            })
        .catch(err => console.log(err));
        },*/

        //获取info信息
        getGroupInfo:function(){
            let _that = this;
            let params = {
                id: this.$route.query.id
            };
            //console.log(params)
            _that.axios.postAll('/wap/trip/customMadeTripUserInfo', params,true)
                    .then(res => {
                    if(res.data.code==200){
                        _that.groupInfo.push(res.data.data)
                        //保存分享用得图片
                        console.log(res.data.data)
                        _that.wechat=res.data.data.wechat
                        _that.phone=res.data.data.phone
                        _that.email=res.data.data.email
                        _that.name1=res.data.data.username
                        _that.adultPassengers=res.data.data.adult
                        _that.childPassengers=res.data.data.child
                        _that.selectedValue=res.data.data.startDate
                        _that.age=res.data.data.age
                        _that.totalprices=res.data.data.total_sale_price


                    }
            }).catch(err => {
                console.log(err)
            });
        },
        //立即预订
        Getorder(){
            let _that = this;
            let params = {
                trip_id: this.$route.query.id,
                orderType:'customMade',
                contact_xing:'',
                contact_ming:_that.name1,
                wechat_number:_that.wechat,
                phone:_that.phone,
                e_mail:_that.email,
            };
            _that.axios.postAll('/wap/order/createCustomMadeOrder', params,true)
                .then(res => {
                    if(res.data.code==200){
                        console.log(res.data.data.order_no)
                        _that.$router.replace('/my-order-detail-unpaid?order_no='+res.data.data.order_no);
                    }else {
                        Toast({message: res.data.msg, duration: 1500});
                    }
                }).catch(err => {
                console.log(err)
            });
        },

        // 打开优惠券
        ticketOpen: function () {
            var _that=this;
            if (_that.ticket_coupon_id) { //被选择优惠券ID
                /*var ticketArr = _that.ticketArr;
                 for (var i = 0; i < ticketArr.length; i++) {
                 if (_that.ticket_coupon_id == ticketArr[i].coupon_id) {
                 if(ticketArr[i].type=='KBX'){
                 _that.axios.postAll('/refund',{
                 order_id:_that.order_id,
                 coupon_id:ticketArr[i].coupon_id,
                 coupon_type:ticketArr[i].type //优惠券自己\第三方
                 },true)
                 .then(res => {
                 if(res.data.code!=0){
                 Toast({message: res.data.msg, duration: 1500});
                 }
                 _that.ticket_coupon_id='';
                 _that.coupon_type='' //优惠券自己\第三方
                 _that.ticket=false;
                 _that.totalPriceFn();// 计算总价
                 })
                 .catch(err => console.log(err));
                 }else{

                 }
                 break;
                 }
                 }*/
                _that.ticket_coupon_id='';
                _that.coupon_type='';
                _that.ticket=false;
                _that.totalPriceFn();// 计算总价
            } else if(_that.ticketArr==undefined){
                Toast({message:'暂无可用旅行红包', duration: 1000});
            } else {
                _that.ticket = true
                setTimeout(() => {
                    _that.ticket_top = (_that.clientHeight - parseInt(window.getComputedStyle(_that.$refs.ticket_main).height)) / 2
                }, 10)
            }
        },
        ticketClose() {
            this.ticket=false
        },
        // 获取优惠券
        getTicket() {
            this.axios.post('wapcouponfollowing', {goods_id: this.goods_id})
                    .then(res => {
                this.ticketArr = res.data
            })
        .catch(err => console.log(err));
        },
        //选择优惠券
        chooseTicket(coupon_id) {
            this.ticket_coupon_id=coupon_id;
            this.ticket=false
            this.totalPriceFn();// 计算总价
        },
        // 计算总价
        totalPriceFn() {
            var _that = this;
            var totalPrice = _that.totalPrice, totalPricePay = _that.totalPrice;
            var ticketinfo = '';
            if (_that.ticket_coupon_id) {
                var ticketArr = _that.ticketArr;
                for (var i = 0; i < ticketArr.length; i++) {
                    if (_that.ticket_coupon_id == ticketArr[i].coupon_id) {
                        if ((parseFloat(totalPrice) >= parseFloat(ticketArr[i].coupon_usecondition)) || ticketArr[i].type=='KBX') {
                            /*if(ticketArr[i].type=='KBX'){
                             this.axios.postAll('/price',{
                             order_id:this.order_id,
                             coupon_id:ticketArr[i].coupon_id,
                             coupon_type:ticketArr[i].type //优惠券自己\第三方
                             },true)
                             .then(res => {
                             //console.log(res)
                             if(res.data.code==0){
                             ticketinfo = '-' +  (parseInt(res.data.data.yuanjia) - res.data.data.discountprice)
                             totalPricePay = res.data.data.discountprice
                             totalPricePay = Math.round(totalPricePay * 100) / 100
                             _that.totalPricePay = totalPricePay
                             _that.ticketinfo = ticketinfo
                             this.coupon_type=ticketArr[i].type
                             }else{
                             Toast({message: res.data.msg, duration: 1500});
                             _that.ticket_coupon_id='';
                             }
                             })
                             .catch(err => console.log(err));
                             }else{
                             }*/
                            if (ticketArr[i].discount) {
                                totalPricePay = totalPrice * ticketArr[i].discount
                                ticketinfo = ticketArr[i].discount * 10 + '折';
                            } else {
                                var temp_ticketinfo=''
                                if(totalPricePay > ticketArr[i].full_reduction){
                                    temp_ticketinfo = ticketArr[i].full_reduction;
                                    totalPricePay = totalPricePay - ticketArr[i].full_reduction
                                }else{
                                    temp_ticketinfo = totalPricePay
                                    totalPricePay = 0
                                }
                                ticketinfo = '-' + temp_ticketinfo + '元';
                            }
                            this.coupon_type=ticketArr[i].type //优惠券自己\第三方
                        }else{
                            _that.ticket_coupon_id=''
                            Toast({message:'不符合旅行红包使用条件', duration: 1000});
                            return false;
                        }
                        break;
                    }
                }
            }
            totalPricePay = Math.round(totalPricePay * 100) / 100
            _that.totalPricePay = totalPricePay
            _that.ticketinfo = ticketinfo
        },
        share() {
            wxShare({
                title: '快帮行', // 分享标题
                desc: this.groupInfo.title+this.groupInfo.description, // 分享描述
                link: config.url+'/quick_help_wap1/#/GroupShow/'+'?/line_id='+this.groupInfo.line_id+'&/product_id='+this.groupInfo.product_id, // 分享链接
                imgUrl: this.groupInfo.img, // 分享图标
                debug: false
            }, function () {
                console.log('分享成功')
            });
        },

        appWXPay(params) {
            let that = this;

            let data = {
                command: 'wechatPay',
                content: {
                    action:'wechatPay',
                    orderId: that.order_id,
                    goodsId: that.goods_id,
                    partnerId: params.partnerid,
                    prepayId: params.prepayid,
                    timeStamp: params.timestamp,
                    package: params.package,
                    nonceStr: params.noncestr,
                    sign: params.sign
                }
            };
            window.postMessage(JSON.stringify(data))
        },

        inputCard($event){
            this.events = $event;
            this.complete = $event.complete
        },
    },
    mounted(){
        let _that = this;
        //行程id
        this.id=this.$route.query.id;
        this.getGroupInfo(); //请求客户信息
        this.clientHeight=document.documentElement.clientHeight;
        this.payActions = [
            {
                name:"微信支付",
                method:function(){
                    _that.beginPay();
                }
            },
            {
                name:"信用卡支付",
                method:function(){
                    _that.stripePayInfo.orderData = {
                        goods_id:_that.goods_id,
                        order_id:_that.order_id,
                        orderType:_that.orderType,
                        order_no:_that.order_no,
                    }
                    // _that.appPay()
                    _that.$router.push({path:'/stripe-pay'})
                }
            }
        ];
        
        //监听RN发过来的消息
        document.addEventListener("message", function (data) {
            let message = data.data;
            let messageObject = JSON.parse(message);
            if (messageObject.command) {
                switch (messageObject.command) {
                    case 'RNMessage' : {
                        // Vue.toasted.show('WXPaySuccess !!!!');
                        break;
                    }

                    case 'WXPaySuccess': {
                        // Vue.toasted.show('WXPaySuccess !!!!');

                        _that.$router.push({path:'/pay-success',query:{goods_id:messageObject.content.goodsId, order_id: messageObject.content.orderId}});
                        break;
                    }
                }
            }
        });
    },
    beforeMount(){
        if(storage.get('contact')){
            var contact=storage.get('contact');
            this.name1=contact.contact_xing
            this.name2=contact.contact_ming
            this.wechat=contact.wechat_number
            this.phone=contact.phone
            this.phoneCode=contact.phoneCode
            this.email=contact.e_mail
        }
        if(storage.get('person')){
            this.person=storage.get('person')
        }
    },
    beforeRouteLeave(to, from, next) {
        if (to.name == "stripe-pay") {
            sessionStorage.stripePayInfo = JSON.stringify(this.stripePayInfo);
            next();
        }else{
            sessionStorage.removeItem("stripePayInfo");
            next();
        }
    }
    }
</script>

<style lang="scss">

    @import "../assets/base";

    /*input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
        color: #666;
        font-size: rpx(30);
    }

    input:-moz-placeholder, textarea:-moz-placeholder {
        color: #666;
        font-size: rpx(30);
    }

    input::-moz-placeholder, textarea::-moz-placeholder {
        color: #666;
        font-size: rpx(30);
    }

    input:-ms-input-placeholder, textarea:-ms-input-placeholder {
        color: #666;
        font-size: rpx(30);
    }*/
    .listinputwidth{
        width: 100%;
    }
    .list-item-select{
        width: 100%;
        font-size: rpx(30);
        text-align: center;
        position: relative;
        margin-left: rpx(50);
    }

    .list-item-select  select {
        width: 100%;
        height: rpx(50);
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        background-color: #ffffff;
        background-image: none !important;
        filter: none !important;
        border: none;
        outline: none;
        /*height: rpx(60) !important;*/
        /*line-height: rpx(60);*/
        font-size: rpx(30);
        color: #666;
    }
    .list-item-select select .list-item-select-opction-stance{
        font-size: rpx(30);
        color: #666;
    }
    .list-item-select select option{
        font-size: rpx(16);
        width: 100%;
        background: #fff;
        text-align: center;
    }
    .list-item-select select::-ms-expand { display: none; }
    .show-order .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .show-order .h120 {
        height: rpx(200);
        background: $bgcolor1;
    }

    .show-order{
        background: $bgcolor1;
        height: 100%;
    }

    .show-order .header{
        display: flex;
        align-items: center;
        padding: rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
    &-btnLeft{
         width: rpx(64);
         height: rpx(64);
         padding-top: rpx(16);
    img{
        width: rpx(32);
        height: rpx(32);
    }
    }
    &-btnRight:after{
         display: block;
         content: ' ';
         width: rpx(64);
         height: rpx(64);
     }
    &-title{
         flex: 1;
         font-size: rpx(36);
         text-align: center;
         font-weight: normal;
     }

    }

    //产品信息

      .show-order .product {
          padding: rpx(30);
          display: flex;
          align-items: center;
          background: $color0;
    &-img {
         width: rpx(160);
         height: rpx(160);
     }
    &-info {
         flex: 1;
         padding-left: rpx(30);
         line-height: 130%;
    &-title {
         font-size: rpx(28);
     }
    &-title2 {
         font-size: rpx(24);
         color: $color5;
     }
    &-desc {
         font-size: rpx(24);
         color: $color5;
     }
    }
    }

    //项列表
      .show-order .list {
          background: $color0;
    &-title {
         font-size: rpx(36);
         padding: rpx(30);
     }
    &-item {
         display: flex;
         align-items: center;
         padding:rpx(35) rpx(30);
         border-bottom: solid 1px $color2;

    &-title {
         width: rpx(200);
         font-size: rpx(30);
     }
    &-input {
         flex: 1;
         display: flex;
    input{
        height: rpx(50);
        font-size: rpx(30);
    }
    &-phoneCode{
         width:rpx(120);
         border-right: solid 1px $color2;
     }
    &-phone{
         overflow: hidden;
         padding-left: rpx(20);
     }
    }
    .warning {
        color: $color3;
    }
    }
    }
    .show-order .person{
        background: $color0;
    &-class{
         padding: rpx(20) 0;
         border-bottom: solid 1px $color2;
    &-title {
         font-size: rpx(30);
         padding: rpx(20) rpx(30);
         font-weight: normal;
    &-icon {
         display: inline-block;
         margin-right: rpx(20);
         width: rpx(8);
         height: rpx(28);
         border-radius: rpx(6);
         background: $color3;

     }
    }
    &-item {
         padding:0 rpx(30);
    &-title {
         font-size: rpx(28);
         font-weight: normal;
         padding:rpx(10) 0;
     }
    &-input{
         display: flex;
         align-items: center;
         padding: rpx(20) 0;
         box-sizing: border-box;
         overflow: hidden;
         font-size: rpx(28);
    &.tit{
         width: rpx(80);
     }
    .col{
        flex: 1;
        padding-right: rpx(20);
    input{
        width: 100%;
        border-bottom:1px solid #eee;
        font-size: rpx(28);
    }
    }
    }
    }
    }
    }
    .show-order .ticketAdd {
        padding: rpx(30);
        background: $color0;
    &-title {
         font-size: rpx(36);
         padding-bottom: rpx(30);
     }
    &-choose {

         display: flex;
    &-title {
         font-size: rpx(30);
         width: rpx(200);
     }
    &-btn {
         flex: 1;
         text-align: right;
         font-size: rpx(30);
         color: $color5;
    &-price {
         font-size: rpx(30);
         color: $color3;
     }
    &-img {
         width: rpx(32);
         height: rpx(32);
         margin-left: rpx(100);
     }
    }
    }

    }

    //优惠券
      .show-order .ticket {
          position: fixed;
          background: rgba(0, 0, 0, .5);
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: 9999;
    &-main {
         position: relative;
         margin-bottom: rpx(240);
         padding: rpx(30);
         background: $color0;
         min-height: rpx(400);
    .noticket {
        padding-top: rpx(90);
        text-align: center;
        font-size: rpx(40);
        color: $color5;
    }
    &-title {
         padding-bottom: rpx(30);
         font-size: rpx(40);
         text-align: center;
     }
    &-close {
         position: absolute;
         left: 50%;
         bottom: rpx(-100);
         margin-left: rpx(-32);
         width: rpx(64);
         height: rpx(64);
     }
    &-list {
         width: rpx(690);
         margin: auto;
    &-item {
         position: relative;
         width: 100%;
         height: rpx(160);
         margin-bottom: rpx(30);
         display: flex;
         align-items: center;
    &-left {
         width: rpx(200);
         height: rpx(160);

         background: $color7;
         border-radius: $radius10 0 0 $radius10;
         font-size: rpx(20);
         color: $color0;
         text-align: center;

    &-price {
         padding-top: rpx(50);
         font-size: rpx(60);
    &-sign {
         padding-top: rpx(80);
         font-size: rpx(30);
     }
    }
    }
    &-right {
         flex: 1;
         width: rpx(240);
         height: rpx(160);
         background: $bgcolor1;
         border-radius: 0 $radius10 $radius10 0;
         padding-left: rpx(30);
    &-text1 {
         font-size: rpx(36);
         padding-top: rpx(40);
     }
    &-text2 {
         padding-top: rpx(10);
         font-size: rpx(24);
         color: $color5;
     }
    &-dot {
         position: absolute;
         right: rpx(30);
         top: rpx(55);
         width: rpx(50);
         height: rpx(50);
         border-radius: 50%;
         background: $color0;
         border: solid 2px $color7;
     }

    }
    }
    }
    }

    }

    //底部
      .show-order .buyBar {
          position: fixed;
          z-index: 2;
          left: 0;
          right: 0;
          bottom: 0;
          border-top: $color2 solid 1px;
          background: $color0;
          display: flex;
          align-items: center;
          flex-wrap: nowrap;
    &-item {
         flex: 1;
         height: rpx(90);
    &-title {
         padding: rpx(10) 0 0 rpx(30);
         font-size: rpx(24);
     }
    &-price {
         padding-top: rpx(10);
         padding-left: rpx(30);
         font-size: rpx(40);
         color: $color3;
     }
    }
    &-item:last-child {
         border-right: none;
     }
    &-buy {
         width: rpx(300);
         height: rpx(90);
         line-height: rpx(90);
         background: linear-gradient(to left, #ff5722, #ffc000);
         text-align: center;
         font-size: rpx(40);
         color: $color0;
     }
    &-active {
         color: $color3;
     }

    }

    /*拼游信息及id*/
    /*.grouptourism{
        padding: rpx(30);
        background: #ffffff;
        font-size: rpx(36);
    }*/
    .pickerDemo .mint-popup-bottom{
        /*bottom:rpx(80)*/
    }
    .pickerDemo .mint-datetime-picker .picker-toolbar .mint-datetime-action{
        font-size: rpx(36);
    }
</style>
